import React, { Component } from 'react';
import './index.css'
import Img from '../../assets/images/auther.png'
import { withRouter } from 'react-router-dom';
import Countdown from 'react-countdown';
class FreeItem extends Component {
    godetail(Id) {
        this.props.history.push({
            pathname: '/detail/' + Id,
            state: {
                Id
            }
        })
    }
    render() {
        return (
            <div className='item_box'>
                <div className='title'>
                    <div className='icon'></div>
                    <span>{this.props.title}</span>
                </div>
                <ul>
                    {this.props.data && this.props.data.map(val => {
                        return (
                            <li className='item' key={val.book_id} onClick={() => this.godetail(val.book_id)}>
                                <img src={val.cover_url} alt="" />
                                <div className='item_content'>
                                    <h3>{val.book_name}</h3>
                                    <div className='ivu-row1'>
                                        <div className='author_name'>
                                            <img src={Img} alt="" />
                                            <span>{val.author_name}</span>
                                        </div>
                                        <div className='tag'>
                                            <span style={val.month_vip == 0 ? { display: 'none' } : { backgroundColor: '#fffbe6', color: '#faad14' }}>包月</span>
                                            <span style={val.is_finish == 'N' ? { backgroundColor: '#f6ffed', color: '#b7eb8f' } : { display: 'none' }}>连载</span>
                                            <span style={val.is_finish == 'Y' ? { backgroundColor: '#f6ffed', color: '#b7eb8f' } : { display: 'none' }}>完结</span>
                                            <span style={{ backgroundColor: '#f9f0ff', color: '#d3adf7' }}>{val.cname}</span>
                                        </div>
                                    </div>
                                    <div className='center'>{val.description}</div>
                                    <div className='bottom'>
                                        还有
                                        <span>
                                            <Countdown date={Date.now() + val.end_date * 1000} />
                                        </span>
                                        结束
                                    </div>
                                </div>
                            </li>
                        )
                    })}

                </ul>
            </div>
        )
    }
}

export default withRouter(FreeItem);